<template>
  <div class="container">
      <div class="content-top">
        <div class="date-box">
            <div>典礼日期：</div>
            <DatePicker />
        </div>
        <div class="time-box">
            <span>时间：</span>
            <SelectBox :options='options1' :moren='moren1' />
        </div>
        <div class="style-box">
            <span>仪式风格：</span>
            <SelectBox :options='options2' :moren='moren2' />
        </div>
        <div class="search-box">
            <el-button type="primary">搜索主持人</el-button>
        </div>
      </div>
      <!-- 每日推荐 -->
      <div class="tuijian">
          <div class="tuijian-top">
              <div class="tuijian-top-left">
                  <img src='../../../assets/logo.jpg' alt="">
                  <span>每日推荐</span>
              </div>
              <div class="tuijian-top-right">
                  <a href="">查看所有主持人></a>
              </div>
              <div class="bottomline"></div>
          </div>
          <!-- <div class="tuijian-box">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>8折</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>8折</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>8折</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>8折</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>8折</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>8折</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>8折</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <img src="../../../assets/u55.png" alt="">
                        <span>星推荐</span>
                        <div class="grid-content bg-purple">
                            <img src="../../../assets/lxq.jpg" alt="">
                            <p>
                                <span>张学友</span>
                                <span>主持价格：9000</span>
                            </p>
                        </div>
                    </el-col>                   
                </el-row>
          </div> -->
          <Tuijian :list='list' />
      </div>
      <!-- 优势 -->
      <Advantage />
      <!-- 合作伙伴 -->
      <div class="partner">
            <div class="title">
                <p>----  合作伙伴  ----</p>
            </div>
            <div class="partnerbox">
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
                  <div class="imgbox">
                      <img src="../../../assets/imgs/u82.png" alt="">
                  </div>
              </div>

      </div>
  </div>
</template>

<script>
import DatePicker from '../DatePicker'
import SelectBox from '../../../componnet/qiantai/SelectBox'
import Tuijian from '../../../componnet/qiantai/Tuijian'
import api from '../../../api'
import Advantage from '../../../componnet/qiantai/Advantage'

export default {
    components:{
        DatePicker,
        SelectBox,
        Tuijian,
        Advantage
    },
    data(){
        return{
            moren1:'上午',
            moren2:'中式婚礼',
            options1: [
                {
                    value: '选项1',
                    label: '上午'
                },
                {
                    value: '选项2',
                    label: '下午'
                }, 
                {
                    value: '选项3',
                    label: '晚上'
                }
            ],
            options2: [
                {
                    value: '选项1',
                    label: '西式婚礼'
                },
                {
                    value: '选项2',
                    label: '中式婚礼'
                }, 
                {
                    value: '选项3',
                    label: '汉唐婚礼'
                },
                {
                    value: '选项4',
                    label: '商务主持'
                },
                {
                    value: '选项5',
                    label: '宴会主持'
                }
            ],
            hostlist:[],
            sortType:'ping',
            list:[]
        }
    },
    mounted() {
        api.gethost().then(res => {      
        if (res.data.status == 200) {
            this.hostlist = res.data.data.result;
            console.log(this.hostlist);
            this.sort(this.sortType);
        } else {
            this.hostlist = [];
        }
        });
    },
    methods:{
        sort(type){
            this.hostlist.sort(this.compare(type));
            this.list=this.hostlist.slice(0,8);
            console.log(this.list);

        },
        compare(attr) {
            return function(a,b){
                var val1 = a[attr];
                var val2 = b[attr];
                return val2 - val1;
            }
        }
    }

}
</script>

<style scoped>
/* 主体 */
.container{
    width: 1200px;
    margin: 0 auto;
}
/* 主体头部 */
.content-top{
    height: 60px;
    line-height: 60px;
}
.content-top::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.content-top>div{
    width: 300px;
    float: left;
}
.date-box::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.date-box>div{
    float: left;
}
.time-box .el-input__inner{
    padding-right: 0px;
}
.content-top .search-box{
    padding-left:60px ;
    box-sizing: border-box;
    width: 280px;
}
.el-button{
    width: 200px;
}
/* 每日推荐 */
.tuijian{
    width: 100%;
    background: url(../../../assets/imgs/b1.jpg);
    margin-top: 20px;
}
.tuijian-top{
    height: 78px;
    line-height: 78px;
    padding: 12px 20px;
    box-sizing: border-box;
    color: black;
    position: relative;
    padding-left: 80px;
}
.bottomline{
    width: 89%;
    height: 1px;
    margin: 0 78px;
    background: black;
    position: absolute;
    left: 0;
    bottom: 0;
}
.tuijian-top::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.tuijian-top-left{
    float: left;
    width: 200px;
    height: 50px;
    box-sizing: border-box;
    position: relative;
}
.tuijian-top-left img{
    display: inline-block;
    width: 110px;
    height: 50px;
}
.tuijian-top-left span{
    height: 50px;
    line-height: 50px;
    display: inline-block;
    position: absolute;
    top: 50%;  /*容器的一半*/
    margin-top: -25px;  /*子盒子高度的一半*/
    margin-left: 10px;
    font-size: 16px;
}
.tuijian-top-right{
    width: 180px;
    float: right;
    height: 50px;
    line-height: 50px;
}
.tuijian-top-right a{
    color: black;
    text-decoration-color: black;
    text-decoration-line: underline;
}
/* 合作伙伴 */
.partner{
    width: 100%;
}
.partner .title p{
    text-align: center;
    color: black;
    font-size: 26px;
    font-weight: 800;
    height: 60px;
    line-height: 60px;
}
.partnerbox::after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
.partnerbox div{
    float: left;
    width: 200px;
    height: 80px;
    margin: 10px 20px;
}
.imgbox img{
    width: 200px;
    height: 80px;
}
</style>